<template>
  <d2-container>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="总盈亏" name="first">
        <el-card shadow="never">
          <el-form ref="form" :inline="true" :model="form" label-width="80px">
            <el-form-item label="策略ID:">
              <!-- <el-input placeholder="请输入内容" v-model="form.strategy_id" clearable></el-input> -->
              <el-select
                v-model="form.strategy_id"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in options_list"
                  :key="item.strategy_id"
                  :label="item.strategy_id"
                  :value="item.strategy_id"
                >
                  <span style="float: left">{{ item.strategy_id }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.strategy_name
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期:">
              <el-date-picker
                type="date"
                v-model="form.start_date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
              -
              <el-date-picker
                type="date"
                v-model="form.end_date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="$router.go('-1')"
                >返回上级</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="first_select_fn_a()"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                @click="$router.push('/gain_and_loss_analysis_details')"
                >策略明细</el-button
              >
            </el-form-item>
          </el-form>
          <div id="main" style="width:1250px;height:600px;"></div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="衍生品交易日报" name="second">
        <el-card shadow="never" class="d2-mb">
          <el-form ref="second_form" :model="second_form" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="客户号:">
                  <el-select
                    v-model="second_form.account"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in second_select_list_khh"
                      :key="item.account"
                      :label="item.account"
                      :value="item.account"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="部门名称:">
                <el-select v-model="form.name" placeholder="请选择">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item> -->
              </el-col>
              <el-col :span="5">
                <el-form-item label="策略名称:">
                  <el-input v-model="second_form.strategy_name" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="策略ID:">
                  <el-input v-model="second_form.strategy_id" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="品名:">
                  <el-select
                    v-model="second_form.product_name"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in second_select_list_pm"
                      :key="item.productName"
                      :label="item.productName"
                      :value="item.productName"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-button
                  size="small"
                  @click="select_fn"
                  style="margin-top:3px;"
                  >查询</el-button
                >
              </el-col>
              <el-col :span="5">
                <el-form-item label="开平:">
                  <el-select
                    v-model="second_form.offset_flag"
                    placeholder="请选择"
                    style="width: 100%;"
                    clearable
                  >
                    <el-option label="开仓" value="开仓"></el-option>
                    <el-option label="平仓" value="平仓"></el-option>
                    <!-- <el-option label="全部" value=""></el-option> -->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="方向:">
                  <el-select
                    v-model="second_form.direction"
                    placeholder="请选择"
                    style="width: 100%;"
                    clearable
                  >
                    <!-- <el-option label="采购" value="采购"></el-option>
                  <el-option label="销售" value="销售"></el-option> -->
                    <el-option label="买入" value="买入"></el-option>
                    <el-option label="卖出" value="卖出"></el-option>
                    <!-- <el-option label="全部" value=""></el-option> -->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="日期:">
                  <el-date-picker
                    type="date"
                    v-model="second_form.start_date"
                    placeholder="开始日期"
                    value-format="yyyy-MM-dd"
                    clearable
                  ></el-date-picker>
                  -
                  <el-date-picker
                    type="date"
                    clearable
                    v-model="second_form.end_date"
                    placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <div class="mb">
          <el-button size="small" @click="$router.go('-1')">返回上级</el-button>
          <el-button size="small">导出</el-button>
          <el-button size="small">打印</el-button>
        </div>
        <el-card shadow="never" class="d2-mb">
          <template slot="header" style="height: 66px">
            <span class="title_x el-button--primary fl"></span>
            <p class="title_l fl">衍生品成交记录表</p>
          </template>
          <el-table
            border
            :data="second_tableData"
            :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{
              background: '#eef1f6',
              'text-align': 'center'
            }"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            ></el-table-column>
            <el-table-column
              prop="trading_day"
              label="日期"
              sortable
            ></el-table-column>
            <el-table-column prop="acount" label="客户号"></el-table-column>
            <el-table-column
              prop="department_name"
              label="部门名称"
            ></el-table-column>
            <el-table-column
              prop="strategy_id"
              label="策略ID"
            ></el-table-column>
            <el-table-column
              prop="strategy_name"
              label="策略名称"
            ></el-table-column>
            <el-table-column
              prop="strategy_type_name"
              label="策略类型"
            ></el-table-column>
            <el-table-column prop="product_name" label="品名"></el-table-column>
            <el-table-column
              prop="instrument_id"
              label="合约"
            ></el-table-column>
            <el-table-column
              prop="direction"
              label="方向"
              sortable
            ></el-table-column>
            <el-table-column prop="offset_flag" label="开平"></el-table-column>
            <el-table-column prop="volume" label="成交手数"></el-table-column>
            <el-table-column prop="price" label="成交均价"></el-table-column>
            <el-table-column prop="commission" label="手续费"></el-table-column>
            <el-table-column
              prop="premium_received"
              label="权利金收支"
              width="100"
            ></el-table-column>
            <el-table-column prop="trade_id" label="成交序号"></el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange_second"
              :current-page="second_form.page"
              :page-size="second_form.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="second_form.pageTotal"
            >
            </el-pagination>
          </div>
        </el-card>
        <!-- <lllry :lrys='fathername' @handlelry='fn2'></lllry> -->
      </el-tab-pane>
    </el-tabs>
  </d2-container>
</template>
<script>
import {
  getDerivative_traded,
  getDerivative_filter,
  getReport_profit_loss
} from "@/api/url";
// import lllry from './componnets/llry'
export default {
  // components: {
  //     lllry
  //   },
  data() {
    return {
      // fathername:'我是爸爸',
      activeName: "first",
      // 第一块
      form: {
        strategy_id: "",
        strategy_name: "",
        department_name: "",
        start_date: "",
        end_date: ""
      },
      form_list: {
        strategy_id: "",
        strategy_name: "",
        department_name: "",
        start_date: "",
        end_date: "",
        request_type: "strategy_list"
      },
      options_list: [],
      // 第二块
      second_form: {
        trading_day: "",
        strategy_name: "",
        strategy_id: "",
        product_name: "",
        offset_flag: "",
        direction: "",
        start_date: "",
        end_date: "",
        account: "",
        page: 1,
        pageSize: 20,
        pageTotal: 0
      },
      second_tableData: [],
      second_select_list_pm: [],
      second_select_list_khh: []
    };
  },
  created() {
    getReport_profit_loss(this.form_list).then(res => {
      this.options_list = res.result;
      this.form.strategy_id = res.result[0].strategy_id;
      this.first_select_fn();
    });
    getDerivative_filter({ branch: "commodity" }).then(res => {
      this.second_select_list_pm = res.result;
    });
    getDerivative_filter({ branch: "account" }).then(res => {
      this.second_select_list_khh = res.result;
    });
    this.select_second_fn();
  },
  // mounted() {
  //   this.drawChart();
  // },
  methods: {
    fn2(aa) {
      console.log(aa);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //形参分别为 日期 当日盈亏数据 累计盈亏数据 都是数组类型
    drawChart(datasone, datastwo, datasthree) {
      let myChart = this.$echarts.init(document.getElementById("main"));
      myChart.setOption({
        title: {
          text: "策略总盈亏",
          left: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ["当日盈亏", "累计盈亏"],
          bottom: 10,
          left: "center"
        },
        xAxis: [
          {
            type: "category",
            data: datasone,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "当日盈亏"
          },
          {
            type: "value",
            name: "累计盈亏"
          }
        ],
        series: [
          {
            name: "当日盈亏",
            type: "bar",
            data: datastwo
          },
          {
            name: "累计盈亏",
            type: "line",
            yAxisIndex: 1,
            data: datasthree
          }
        ]
      });
    },
    handleCurrentChange(val) {
      console.log("换页发送请求");
    },
    first_select_fn() {
      getReport_profit_loss(this.form).then(res => {
        let first_one = [];
        let first_two = [];
        let first_three = [];
        res.result.forEach(item => {
          first_one.push(item.date);
          first_one.reverse();
          first_two.push(item.todayAll);
          first_three.push(item.diffAll);
          first_two.reverse();
          first_three.reverse();
        });
        this.$nextTick(() => {
          this.drawChart(first_one, first_two, first_three);
        });
      });
    },
    first_select_fn_a() {
      if (this.form.strategy_id == "") {
        this.$message({
          message: "策略ID不能为空",
          type: "warning"
        });
        return;
      }
      this.first_select_fn();
    },
    //第二块
    select_second_fn() {
      if (this.second_form.start_date == null) {
        this.second_form.start_date = "";
      }
      if (this.second_form.end_date == null) {
        this.second_form.end_date = "";
      }
      getDerivative_traded(this.second_form).then(res => {
        this.second_tableData = res.result.results;
        this.second_form.pageTotal = res.result.count;
      });
    },
    select_fn() {
      this.second_form.page = 1;
      this.select_second_fn();
    },
    handleCurrentChange_second(val) {
      this.second_form.page = val;
      this.select_second_fn();
    }
  }
};
</script>
<style scoped>
.el-pagination {
  text-align: center;
}
</style>
